li{list-style: none; }
ul,li{margin: 0; padding: 0;}
#picture{position: fixed; right: 0px; bottom: 300px;}
#picture li{
	background-color: black;
	margin-bottom: 5px;
	padding: 5px;
	border-radius: 5px 0px 0px 5px;
}
p{color: white; font-weight: bold;height: 31px;line-height: 31px; opacity: 0; width: 70px;}
#gwc{
	background: red;
	border-radius: 5px 0px 0px 5px;
	position: fixed;
	right: 0px; bottom: 402px;
	padding-right: 50px;
	padding-left: 15px;
}
#gz{
	background: red;
	border-radius: 5px 0px 0px 5px;
	position: fixed;
	right: 0px; bottom: 364px;
	padding-right: 50px;
	padding-left: 15px;
}
#zj{
	background: red;
	border-radius: 5px 0px 0px 5px;
	position: fixed;
	right: 0px; bottom: 328px;
	padding-right: 50px;
	padding-left: 15px;
}
#xx{
	background: red;
	border-radius: 5px 0px 0px 5px;
	position: fixed;
	right: 0px; bottom: 290px;
	padding-right: 50px;
	padding-left: 15px;
}
@keyframes spread{
	0%{width: 0px;}15%{width: 10px;}30%{width: 20px;}45%{width: 30px;}
	60%{width: 40px;}75%{width: 50px;}90%{width: 60px;}100%{width: 70px;}
}
#picture li:nth-of-type(1):hover #gwc{
	animation: spread 0.5s linear both;
	opacity: 0.7;
}
#picture li:nth-of-type(2):hover #gz{
	animation: spread 0.5s linear both;
	opacity: 0.7;
}
#picture li:nth-of-type(3):hover #zj{
	animation: spread 0.5s linear both;
	opacity: 0.7;
}
#picture li:nth-of-type(4):hover #xx{
	animation: spread 0.5s linear both;
	opacity: 0.7;
}
